<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/core/diagram_object.js"></script>
    <script src="js/core/diagram_connect.js"></script>
    <script src="js/core/diagram_scene.js"></script>
    <script src="js/gui/bottom_menu.js"></script>
    <script>
        $(document).ready(function(){
            // Создание модели сцены.
            var view = $('#view');
            var canvasHeight = window.innerHeight - 30;
            var canvasWidth = window.innerWidth - 40;
            var scene = new DiagramScene(view.get(0), canvasHeight, canvasWidth);

            // Обработка изменения размеров окна
            window.onresize = function(event){
                var canvasHeight = window.innerHeight - 30;
                var canvasWidth = window.innerWidth - 40;

                scene.setHeight(canvasHeight);
                scene.setWidth(canvasWidth);
            };

            // Вывод отладки - режима
            var text = $('#text');
            text.text('Режим работы с диаграммой');

            // Обработка клика по контексту рисования.
            view.click(function(data){
                scene.click(data);
                text.text('Режим работы с диаграммой');
            });

            // Обработка клика для очистки сцены.
            $('#clearBtn').click(function(){
                scene.clear();
                return false;
            });

            // Добавление объекта
            $('#addObjectBtn').click(function(){
                scene.setMode(OBJECT);
                text.text('Добавление объекта');
            });

            // Добавление связи
            $('#addLinkBtn').click(function(){
                scene.setMode(LINK);
                text.text('Создание связи');
            });

            // Удаление объекта
            $('#removeItemBtn').click(function(){
                scene.setMode(REMOVE);
                text.text('Удаление объекта');
            });

            // Сохранение в картинку
            $('#toImageBtn').click(function(){
                $('#viewImg').attr('src', scene.toImage());
            });

        });
    </script>

    <title>Тестовый проект трпо на JS</title>

</head>
<body>
    <!--<h1>Прототип редактора диаграмм на JavaScript</h1>-->
    <div class="content">
        <div id="scene">
            <p id="text" style="display: none"></p>
            <canvas id="view">Диаграмма</canvas>
        </div>
        <div id="controls" style="display: none">
            <button id="addObjectBtn" style="border: 0; background: transparent">
                <img src="images/add_object_50.jpg" alt="Добавить объект" title="Добавить объект">
            </button>
            <button id="addLinkBtn" style="border: 0; background: transparent">
                <img src="images/add_link_50.jpg" alt="Добавить связь" title="Добавить связь">
            </button>
            <button id="removeItemBtn" style="border: 0; background: transparent;">
                <img src="images/delete_object_50.jpg" alt="Удалить элемент" title="Удалить элемент">
            </button>
            <button id="toImageBtn" style="border: 0; background: transparent;">
                <img src="images/to_image_50.jpg" alt="В картинку" title="В картинку">
            </button>
            <button id="clearBtn" style="border: 0; background: transparent;">
                <img src="images/clear_50.jpg" alt="Очистить" title="Очистить">
            </button>
        </div>
        <img id="viewImg" src="" style="display: none"/>
    </div>
    <!--<div id="links">-->
        <!--<ul>Дополнительные ссылки:-->
            <!--<li>Ссылка на репозиторий проекта: <a href="https://code.google.com/p/diagram-redactor-js/">code.google.com</a></li>-->
        <!--</ul>-->
    <!--</div>-->
</body>
</html>